<template>
	<div id="content">
		<Header />
		<div class="bread">
			<div class="cont w1200">
				<img src="../../../assets/img/location.png" alt=""><a><router-link to="/portal/index">首页</router-link></a> > <a>专题专栏</a>
			</div>
		</div>
		<div class="inner">
			<div class="news">
				<div class="cont w1200">
					<div class="left">
						<div class="tit"><img src="../../../assets/img/news-icon.png" alt="">专题专栏</div>
						<div class="list">
							<Tree @node-click="treeChecked" :treeIdChecked="treeId" :childIdChecked="selectId"></Tree>
						</div>
					</div>
					<div class="right">
						<div class="tit" v-if="data.length > 1"><img src="../../../assets/img/title-icon.png"
								alt="">专题专栏</div>
						<div class="nodata" v-if="data.length == 0">
							暂无数据
						</div>
						<div class="news-detail" v-if="data.length == 1">
							<div class="title">
								<h5>{{ data[0].title }}</h5>
								<div class="text">
									<span>来源：东西湖区人大常委会办公室</span>
									<em>|</em>
									<span>日期：{{ data[0].publishTime }}</span>
									<em>|</em>
									<span>浏览次数：{{ data[0].viewCount }}</span>
								</div>
							</div>
							<p v-html="data[0].articlesDb"></p>
						</div>
						<div class="list" v-if="data.length > 1">
							<a class="item" v-for="item in data" @click="goItem(item.id)"><span
									class="dot">·</span>{{ item.title }}<span class="time">{{ item.publishTime
									}}</span></a>
						</div>
						<div class="page">
							<pagination v-show="total > 0 && data.length > 1" :total="total" :page.sync="pageNum"
								:limit.sync="pageSize" @pagination="getData" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<Contact />
	</div>

</template>

<script>
import Tree from '@/components/Tree';
import Header from '@/components/Header';
import Contact from '@/components/Contact';
import { getArticleDetail } from "@/api/website";
export default {
	data() {
		return {
			treeId: 5,
			data: [],
			selectId: 41,
			total: 0,
			pageNum: 1,
			pageSize: 10
		}
	},
	components: {
		Tree,
		Header,
		Contact
	},
	created() {
		this.getData()
	},
	mounted() {
		if(this.$route.query.id){
			this.treeChecked(this.$route.query.id)
		}
	},
	methods: {
		getData() {
			this.loading = true;
			getArticleDetail({ id: this.selectId,pageNum: this.pageNum, pageSize: this.pageSize}).then(response => {
				this.data = response.rows;
			});
		},
		treeChecked(selectId) {
			this.selectId = selectId;
			this.getData()
		},
		goItem(id){
			let array= [];
            for (const key in this.data) {
				if (this.data[key].id == id) {
					array.push(this.data[key])
					break
				}
			}
			this.data = array
		}
	}
};
</script>

<style scoped lang="scss"></style>
